<template>
  <div class="loginIndex">
    <div class="container">
      <div class="logo">
        <a >
          <img src="../../static/images/logoIndex.png" alt="">
        </a>
      </div>
    </div>
    <div class="loginPage">
      <div class="container">
        <div class="loginPageWrap">
          <p class="loginTitle">用户登录</p>
          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名:" prop="userName">
              <el-input type="text" v-model="ruleForm2.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="userPassword">
              <el-input type="password" v-model="ruleForm2.userPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="login-text-align">
              <el-button type="primary"  @keyup.enter.native="submitForm('ruleForm2')" @click.stop="submitForm('ruleForm2')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

  </div>

</template>
<script>

  import {strToHexCharCode,toFixedBit,dec2hex,formatTime } from  '@/utils/index.js'
  import {mapMutations} from 'vuex'
  var mdSecret ='fangyou968123456'
  export default {
    data() {
      var validateAccount = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));

        }else{
          callback();
        }
//        else {
//          if (this.ruleForm2.userName !== '') {
//            this.$refs.ruleForm2.validateField('userName');
//          }
//          callback();
//        }

      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }  else {
          callback();
        }
      };
      return {
        ruleForm2: {
          userName: '',
          userPassword: '',
        },
        rules2: {
          userName: [
            { validator: validateAccount, trigger: 'blur' }
          ],
          userPassword: [
            { validator: validatePass, trigger: 'blur' }
          ],

        }
      };
    },
    methods: {
      ...mapMutations(['saveUid','changeLoginStatus']),
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.axios.post('/api/v1/accout/userlogin',
                {
                  user_name:this.ruleForm2.userName.trim(),
                  user_pwd:this.ruleForm2.userPassword
                })
                .then((res)=>{
                  console.log(res)
                  if(res.data.code==0){
                    this.$alert(res.data.message, '提示', {
                      confirmButtonText: '确定',
                      callback: action => {
                          this.changeLoginStatus({
                            isExit:1
                          });
                        this.saveUid({
                          user_id:res.data.data.user_id,
                          token:res.data.data.token,
                          user_name:res.data.data.user_name,
                          company_id:res.data.data.company_id,
                          company_name:res.data.data.company_name,
                          company_pid:res.data.data.company_pid,
                          company_num:res.data.data.company_num,
                          is_admin:res.data.data.is_admin
                        });
                        sessionStorage.setItem('user_id',res.data.data.user_id)
                        sessionStorage.setItem('user_name',res.data.data.user_name)
                        sessionStorage.setItem('token',res.data.data.token)
                        sessionStorage.setItem('company_id',res.data.data.company_id)
                        sessionStorage.setItem('company_name',res.data.data.company_name);
                        sessionStorage.setItem('company_pid',res.data.data.company_pid)
                        sessionStorage.setItem('company_num',res.data.data.company_num);
                        sessionStorage.setItem('is_admin',res.data.data.is_admin);
                        this.$router.push({
                          path:'/pageIndex'
                        })
                      }
                    });
                  }else {
                    this.$alert(res.data.message, '提示', {
                      confirmButtonText: '确定',
                      callback: action => {

                      }
                    });
                  }

                })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      mounted(){
      }
    }
  }
</script>
<style scoped>
  .loginIndex{
    width: 100%;
    height: 100%;
    background:#edf5e4;
    overflow: hidden;
  }
  .loginIndex .logo{
    margin-top: 50px;
    margin-bottom: 126px;
  }
  .loginPage{
    margin: 0 auto;
    background-image:url("../../static/images/logonIndex.jpg") ;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;

  }
  .loginPage >>>   .el-form .el-form-item {
      padding-bottom: 22px;
  }
  .loginPage  .loginTitle{
      text-align: center;
      color: white;
      font-size:26px;
      padding-top: 32px;
       padding-bottom: 25px;
  }
  .loginPage  .demo-ruleForm {
    width: 500px;
    margin: 0 auto;
    background: white;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .loginIndex  >>> .loginPage  .demo-ruleForm .el-input__inner{
      width: 300px;
  }
  .loginIndex  >>> .loginPage  .demo-ruleForm .el-form-item{
    margin-bottom: 0;
  }
  .loginIndex  >>> .loginPage  .demo-ruleForm .el-button--primary{
    background: #e6b421;
    border-color: #e6b421;
    width: 160px;
    text-align: center;
    margin-left: 60px;
  }
  @media screen and (max-width: 1400px){
    .loginIndex .logo{
      margin-top:20px;
      margin-bottom: 60px;
    }
  }
</style>
